<template>
    <div>
        <div class="header-abs" @click="handleBack" v-show="showAbs">
            <div class="iconfont header-abs-back">&#xe65e;</div>
        </div>
        <div 
        class="header-fixed" 
        v-show="notShow"
        :style="opacityStyle"
        >
            <div class="iconfont header-fixed-back" @click="handleBack">&#xe65e;</div>
            景点详情
        </div>
    </div>
</template>

<script>
export default {
    name:'DetailHeader',
    data(){
        return {
            showAbs:true,
            opacityStyle:{
                opacity:0,
            }
        }
    },
    // 设置计算属性notShowa为!this.showAbs
    computed:{
        notShow(){
            return !this.showAbs
        }
    },
    methods:{
        // 被点击时返回上一页
        handleBack(){
            this.$router.back();
        },
        // 设置滚动事件，当滚动的top值大于60时将this.showAbs设置为false，并且增加header-fixed组件的透明度；
        // 直到top为140时将透明度设置为1；
        // 否则将this.showAbs设置为true
        handleScroll(){
            console.log('scroll')
            const top=document.documentElement.scrollTop ||document.body.scrollTop||window.pageYoffset
            if(top>60) {
                const opacity=top/140;
                if (top<=140) {
                    this.opacityStyle={
                        opacity
                    }
                }
                this.showAbs=false;
            } else {
                this.showAbs=true;
            }
        }
    },
    // 当页面加载时给全局绑定scroll事件
    mounted(){
        window.addEventListener('scroll',this.handleScroll)
    },
    // 当页面销毁时对全局绑定的scroll事件进行解绑
    destroyed(){
        window.removeEventListener('scroll',this.handleScroll)
    }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/varibles.scss";
.header-fixed {
  height: 0.86rem;
  line-height: 0.86rem;
  overflow: hidden;
  text-align: center;
  color: #fff;
  background-color: $bgColor;
  font-size: 0.32rem;
  position: fixed;
  top:0;
  left:0;
  right:0;
  z-index:99;
  .header-fixed-back {
    width: 0.64rem;
    text-align: center;
    font-size: 0.4rem;
    position: absolute;
    top: 0;
    left: 0;
    color:#fff;
  }
}
.header-abs {
    position:absolute;
    left:.2rem;
    top:.2rem;
    width:.8rem;
    height:.8rem;
    border-radius:.4rem;
    background-color:rgba(0,0,0,.8);
    text-align:center;
    line-height:.8rem;
    .header-abs-back {
        color:#fff;
        font-size:.4rem;
    }
}
</style>